import Base from "../base.js";
import AdminsApi from "../../api/admins.js"
export default class extends Base {

    render() {
        this.$el.html(`
            <header class="login">后台管理系统</header>
            <div class="login-box">
                <div class="layui-form-item">
                    <label class="layui-form-label">请输入账户</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux msg"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">请输入密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required="" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button disabled class="layui-btn layui-btn-primary reg-btn" lay-submit="" lay-filter="formDemo"> 注册</button>
                    </div>
                </div>
            </div>
        `)
        this.regBtn = $(".reg-btn");
        this.username = $("input[name=username]");
        this.password = $("input[name=password]");
        this.msg = $(".msg");
    }
    async regFn() {
        const data = {
            username: this.username.val(),
            password: this.password.val(),
        }
        const datas = await AdminsApi.adminReg(data);
        if (datas) {
            layer.msg('注册成功', {
                offset: '15rem'
                , icon: 1
                , time: 1000
            }, function () {
                location.hash = "#/login"
            });
        }
    }
    async checkName() {
        const adminName = this.username.val();
        const data = await AdminsApi.checkName({ adminName });
        console.log(data);
        if (data) {
            this.regBtn.attr("disabled", true).addClass("layui-btn-primary");
            this.msg.html("用户名重复，请重新输入")
        } else {
            this.regBtn.attr("disabled", false).removeClass("layui-btn-primary")
            this.msg.html("")
        }
    }
    handle() {
        this.regBtn.on("click", this.regFn.bind(this));
        this.username.on("blur", this.checkName.bind(this))
    }
}